<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.company.ems.model.User" %>
<%
    User loginUser = (User) session.getAttribute("loginUser");
    if (loginUser == null) {
        response.sendRedirect(request.getContextPath() + "/login.jsp");
        return;
    }
    Integer totalEmployee = (Integer) request.getAttribute("totalEmployee");
    if (totalEmployee == null) totalEmployee = 0;
%>
<html>
<head>
    <title>仪表盘 - 员工信息管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        /* 仪表盘专属样式 */
        .top-nav {
            background: linear-gradient(135deg, var(--primary-light), var(--primary));
            color: #fff;
            padding: 16px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .nav-brand {
            font-size: 20px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-user {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .logout-btn {
            color: #fff;
            background-color: rgba(255, 255, 255, 0.2);
            padding: 8px 16px;
            border-radius: var(--radius);
            transition: var(--transition);
        }

        .logout-btn:hover {
            background-color: rgba(255, 255, 255, 0.3);
            color: #fff;
        }

        .dashboard-container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 20px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 24px;
            margin-bottom: 30px;
        }

        .stat-card {
            padding: 24px;
            border-radius: var(--radius);
            background: linear-gradient(135deg, #fff, var(--gray-100));
            box-shadow: var(--shadow);
            text-align: center;
            transition: var(--transition);
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

        .stat-icon {
            font-size: 40px;
            color: var(--primary);
            margin-bottom: 16px;
        }

        .stat-value {
            font-size: 36px;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 8px;
        }

        .stat-label {
            font-size: 14px;
            color: var(--gray-700);
        }

        .quick-menu {
            background-color: #fff;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 24px;
        }

        .menu-title {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 16px;
            color: var(--gray-900);
        }

        .menu-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
        }

        .menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-radius: var(--radius);
            background-color: var(--gray-100);
            transition: var(--transition);
        }

        .menu-item:hover {
            background-color: rgba(67, 97, 238, 0.1);
            color: var(--primary);
        }

        .menu-icon {
            font-size: 20px;
            color: var(--primary);
        }

        .app-footer {
            text-align: center;
            padding: 20px;
            margin-top: 50px;
            color: var(--gray-700);
            font-size: 14px;
            border-top: 1px solid var(--gray-200);
        }
    </style>
</head>
<body>
<!-- 顶部导航 -->
<nav class="top-nav">
    <div class="nav-brand">
        <i class="fa fa-dashboard"></i>
        <span>员工信息管理系统</span>
    </div>
    <div class="nav-user">
        <span>欢迎您，<%= loginUser.getUsername() %>！</span>
        <a href="${pageContext.request.contextPath}/LogoutServlet" class="logout-btn">
            <i class="fa fa-sign-out"></i> 退出登录
        </a>
    </div>
</nav>

<!-- 主体内容 -->
<div class="dashboard-container">
    <h1 class="page-title">
        <i class="fa fa-tachometer"></i> 系统仪表盘
    </h1>

    <!-- 数据统计卡片 -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">
                <i class="fa fa-users"></i>
            </div>
            <div class="stat-value"><%= totalEmployee %></div>
            <div class="stat-label">员工总数</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <i class="fa fa-building"></i>
            </div>
            <div class="stat-value">3</div>
            <div class="stat-label">部门数量</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <i class="fa fa-calendar"></i>
            </div>
            <div class="stat-value">2</div>
            <div class="stat-label">本月新增</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <i class="fa fa-line-chart"></i>
            </div>
            <div class="stat-value">98%</div>
            <div class="stat-label">数据完整性</div>
        </div>
    </div>

    <!-- 快速操作菜单 -->
    <div class="card quick-menu">
        <h3 class="menu-title">
            <i class="fa fa-bolt"></i> 快速操作
        </h3>
        <div class="menu-list">
            <a href="${pageContext.request.contextPath}/EmployeeServlet?action=list" class="menu-item">
                <div class="menu-icon">
                    <i class="fa fa-list"></i>
                </div>
                <div>员工信息管理</div>
            </a>
            <a href="${pageContext.request.contextPath}/EmployeeServlet?action=add" class="menu-item">
                <div class="menu-icon">
                    <i class="fa fa-plus"></i>
                </div>
                <div>新增员工</div>
            </a>
            <a href="${pageContext.request.contextPath}/EmployeeServlet?action=list&dept=技术部" class="menu-item">
                <div class="menu-icon">
                    <i class="fa fa-code"></i>
                </div>
                <div>技术部员工</div>
            </a>
            <a href="${pageContext.request.contextPath}/EmployeeServlet?action=list&dept=市场部" class="menu-item">
                <div class="menu-icon">
                    <i class="fa fa-line-chart"></i>
                </div>
                <div>市场部员工</div>
            </a>
            <a href="${pageContext.request.contextPath}/EmployeeServlet?action=list&dept=人事部" class="menu-item">
                <div class="menu-icon">
                    <i class="fa fa-users"></i>
                </div>
                <div>人事部员工</div>
            </a>
            <a href="${pageContext.request.contextPath}/DashboardServlet" class="menu-item">
                <div class="menu-icon">
                    <i class="fa fa-refresh"></i>
                </div>
                <div>刷新数据</div>
            </a>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="app-footer">
    <p>© 2025 员工信息管理系统 | 技术栈：Servlet + JSP + MyBatis</p>
</footer>
</body>
</html>